<template>
    <span>姓名:</span>
    <input type="text" v-model="name">
    <!--小选影响全选-->
    <div>
        <span>全选: </span>
        <input type="checkbox" v-model="isAll">
        <button @click="btn">反选</button>
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                <!--对象C 关联 选中的状态-->
                <input type="checkbox" v-model="item.c">
                <span>{{item.name}}</span>
            </li>
        </ul>

    </div>
</template>
<script>
export default {
    data() {
        return {
            /**
             * 计算属性 完整写法:
             *  computed:{
             *  "属性名":{
             *  get(){
             *  return 计算后的值;
             *  },
             * set(value){
             * }
             * 
             * }
             * 
             * }
             */
            arr: [
                { name: "萧炎", c: false },
                { name: "叶凡", c: false },
                { name: "熊孩子", c: false },
                { name: "王林", c: false },
            ]

        };
    },
    computed: {
        name: {
            //给name赋值时，触发set方法
            set(value) {
                console.log(value);
            },
            get() {
                return ""
            }
        },
        // isAll() {
        //     //every 用法: 查找数组里面" 不符合的条件" ,如果都符合条件,返回true,否则返回false
        //     return this.arr.every(item => item.c === true)
        // }
        //全选影响小选择
        isAll: {
            set(val) { 
                //圈选框 选中的状态(true,false)
                this.arr.forEach(item => item.c = val)
            },
            get() { 
                //统计小选框的状态 
                return this.arr.every(item => item.c === true)
            }
        }
    },
    methods: {
        btn() { 
            //遍历获取到数组里面c属性取反 在进行赋值
            this.arr.forEach(item => item.c = !item.c)
        }
    }


};
</script>